<template>
<<<<<<< HEAD
  <div>
    <h3 style="margin-left: 20px; margin-bottom: 10px">可视化对讲分组</h3>
    <!-- 右侧内容头部 -->
    <div class="virtualEquitHeader">
      <el-input
        type="text"
        placeholder="请输入分组名称"
        style="width: 400px; margin-left: 20px; margin-right: 10px"
      ></el-input>
      <el-button type="primary" size="small">查询</el-button><br />
      <el-button
        type="primary"
        size="small"
        @click="handleAddGroup"
        style="margin-top: 10px; margin-left: 20px"
        >添加分组</el-button
      >
      <el-button type="danger" size="small">批量删除分组</el-button>
    </div>
    <!-- 右侧内容表单部分 -->
    <div class="virtualEquitTable">
      <el-table :data="cardGroupData" v-loading="listLoading" border>
        <el-table-column label="编号" width="55">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="分组id">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="分组名称">
          <template slot-scope="scope">
            {{ scope.row.groupName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备忘录">
          <template slot-scope="scope">
            {{ scope.row.memo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="分组类型">
          <template slot-scope="scope">
            {{ scope.row.groupType }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              @click="showDetail(scope.row)"
              type="primary"
              size="small"
              >查看分组</el-button
            >
            <el-button
              @click="updataGroup(scope.row)"
              type="primary"
              size="small"
              >修改分组</el-button
            >
            <el-button
              @click="deleteGroup(scope.row)"
              type="danger"
              size="small"
              >删除分组</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="block" style="margin-top: 10px">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分组详情弹窗 -->
    <el-dialog title="分组详情" :visible.sync="isDialogShow" width="50%" center>
      <el-table :data="cardData">
        <el-table-column prop="channelSeq" label="设备序号"></el-table-column>
        <el-table-column prop="deviceCode" label="设备编码"></el-table-column>
        <el-table-column
          prop="deviceCodeChn"
          label="通道编码号"
        ></el-table-column>
        <el-table-column prop="deviceIP" label="设备ip"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column
          prop="deviceTypeStr"
          label="设备类型"
        ></el-table-column>
        <el-table-column prop="groupId" label="分组id"></el-table-column>
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="unitSeq" label="单元序号"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="添加分组"
      :visible.sync="isAddGroupDialog"
      width="50%"
      center
    >
      <el-form :data="addGroupForm">
        <el-form-item label="分组名称" label-width="80px">
          <el-input v-model="addGroupForm.groupName"></el-input>
        </el-form-item>
        <el-form-item label="分组类型" label-width="80px">
          <el-input v-model="addGroupForm.groupType"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="80px">
          <el-input v-model="addGroupForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="关联设备权限" label-width="80px">
          <el-input v-model="addGroupForm.relChannels"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleAddGroupComplete"
        >确 定</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { getAllCardGroup } from "@/api/cardgroup";

export default {
  name: "CardGroup",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      cardGroupData: null,
      // [
      //   {
      //     "id": 1,
      //     "groupName": "默认分组1",
      //     "meme": "test",
      //     "groupType" :1
      //   },
      // {
      //   "id": 2,
      //   "groupName": "默认分组2",
      //   "meme": "test",
      //   "groupType" :1
      // },
      // {
      //   "id": 3,
      //   "groupName": "默认分组3",
      //   "meme": "test",
      //   "groupType" :1
      // },
      // {
      //   "id": 4,
      //   "groupName": "默认分组4",
      //   "meme": "test",
      //   "groupType" :1
      // }
      // ]
      listLoading: true,
      currentPage: 1,
      total: 10,
      // 分组详情展开标志
      isDialogShow: false,
      isAddGroupDialog: false,
      cardData: [
        {
          channelSeq: 0,
          deviceCode: "1000007",
          deviceCodeChn: "1000007$7$0$0",
          deviceIP: "15.2.3.2",
          deviceName: "园区1期1幢1单元数字门口机(白光)_01",
          deviceTypeStr: "数字门口机(白光)",
          groupId: 2,
          id: 2,
          unitSeq: 0,
        },
      ],
      addGroupForm: [
        {
          groupName: "",
          groupType: 1, // 接口文档建议写死为1
          memo: "",
          relChannels: "",
        },
      ],
    };
  },
  created() {
    this.getAll();
  },

  methods: {
    async getAll() {
      // let dat = {
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize,
      // };

      this.listLoading = true;
      const { data } = await getAllCardGroup();

      // getAllCardGroup().then((response) => {
      //   this.cardGroupData = response.data.items;
      //   console.log(this.cardGroupData);
      //   this.listLoading = false;
      // });

      // const res = await getAllCardGroup();
      // console.log(res);
      // this.cardGroupData = res.data.items;
      // this.listLoading = false;

      console.log(data);
      const list = data.items;
      this.cardGroupData = list;
      this.listLoading = false;
    },
    showDetail(row) {
      this.isDialogShow = true;
    },
    updataGroup(row) {
      //修改分组
    },
    deleteGroup(row, index) {
      //删除分组
      this.$confirm("删除您选中的" + row.id + "号分组，是否继续？", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(this.cardGroupData.splice(index, 1));
    },
    handleAddGroup() {
      this.isAddGroupDialog = true;
    },
    handleAddGroupComplete() {
      this.isAddGroupDialog = false;
    },
  },
};
</script>

<style scoped>
.virtualEquitTable {
  margin-top: 10px;
  margin-left: 20px;
}
=======
    <div>

    </div>
</template>

<script>
  export default {
    name: 'CardGroup'
  }
</script>

<style scoped>

>>>>>>> 9bd91f7cdea89e78ee433b17f8909db13645484f
</style>
